<template>
    门店名称:
    <input type="text" v-model="title">
    服务范围:
    <select v-model="tid">
        <option :value="-1">--请选择--</option>
        <option v-for="item in bindt" :value="item.said">{{item.sarea}}</option>
    </select>
    <input type="button" value="查询" class="btn btn-info" @click="show(),page.pageindex=1">
    <input type="button" value="批量删除" class="btn btn-danger" @click="pid()">
    <input type="button" value="批量修改" class="btn btn-dark" @click="piu()">
    <table border="1" class="table table-bordered">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" @change="quan" v-model="chead">全选
                </td>
                <td>门店编号</td>
                <td>门店名称</td>
                <td>门店地址</td>
                <td>门店图片</td>
                <td>门店介绍</td>
                <td>服务范围</td>
                <td>店主</td>
                <td>联系电话</td>
                <td>营业时间</td>
                <td>门店状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info"> 
                <td>
                    <input type="checkbox" :value="item.sid" :checked="cbody" v-model="arr">
                </td>
                <td>{{item.sid}}</td>
                <td>{{item.sname}}</td>
                <td>{{item.saddr}}</td>
                <td><img :src="item.spicture" style="width: 110px;height: 100px;"></td>
                <td>{{item.sintro}}</td>
                <td>{{item.sarea}}</td>
                <td>{{item.owner}}</td>
                <td>{{item.sphone}}</td>
                <td>{{item.servicetime.substring(0,10)}}</td>
                <td>{{item.shopstate?"启用":"禁用"}}</td>
                <td>
                    <a href="#" @click="jump(item.sid)">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
    <a href="#" @click="fen(1)">首页</a>&nbsp;
    <a href="#" @click="fen(page.pageindex-1)">上一页</a>&nbsp;
    <a href="#" @click="fen(page.pageindex+1)">下一页</a>&nbsp;
    <a href="#" @click="fen(page.zongpage)">尾页</a>&nbsp;
    当前第 {{ page.pageindex }} / {{ page.zongpage }} 页
    总共 {{ page.zonghang }} 行
    每页 {{ page.pagesize }} 行
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import axios from 'axios';
import {ref} from 'vue'
import moment from 'moment';
import { useRouter } from 'vue-router';
onMounted(()=>{
    bind();
    show();
})
const ror=useRouter();
const jump=(id:number)=>{
    ror.push({
        name:'UpdShop',
        params:{
            id:id
        }
    })
}
const cbody=ref(false);
const chead=ref(false);
const arr=ref([]);
const quan=()=>{
    if(chead.value){
        cbody.value=true;
        arr.value=info.value.map((x:any)=>{
            return x.sid;
        })
    }
    else{
        cbody.value=false;
    }
}
const piu=()=>{
    if(arr.value.length==0){
        alert('还没有选择');
        return;
    }
    else{
        if(confirm('Are you sure?')){
            axios.get('http://localhost:63668/api/Shop/UpdState',{
                params:{
                    ids:arr.value.toString()
                }
            })
            .then(res=>{
                if(res.data>0){
                    alert('修改成功');
                    show();
                }
                else{
                    alert('修改失败');
                }
            })
            .catch(error=>{
                console.log(error);
            })
        }
    }
}
const pid=()=>{
    if(arr.value.length==0){
        alert('还没有选择');
        return;
    }
    else{
        if(confirm('Are you sure?')){
            axios.get('http://localhost:63668/api/Shop/DelShop',{
                params:{
                    ids:arr.value.toString()
                }
            })
            .then(res=>{
                if(res.data>0){
                    alert('删除成功');
                    show();
                }
                else{
                    alert('删除失败');
                }
            })
            .catch(error=>{
                console.log(error);
            })
        }
    }
}
const fen=(p:any)=>{
    if(p>=1&&p<=page.value.zongpage){
        page.value.pageindex=p;
        show();
    }
    else{
        alert('页码有误');
        return;
    }
}
const info:any=ref([{
    "said": 0,
    "sarea": "",
    "sid": 2,
    "sname": "",
    "spicture": "",
    "sphone": "",
    "servicetime": "",
    "sintro": "",
    "shopstate": true,
    "saddr": "",
    "owner": "",
    "sisdel": 0
}])
const bindt=ref([{
    "said": 0,
    "sarea": ""
}])
const bind=()=>{
    axios.get('http://localhost:63668/api/Shop/Bind_s')
    .then(res=>{
        bindt.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}
const page=ref({
    zonghang:0,
    zongpage:0,
    pagesize:2,
    pageindex:1
})
const tid=ref(-1);
const title=ref('');
const show=()=>{
    axios.get('http://localhost:63668/api/Shop/ShowShop',{
        params:{
            name:title.value,
            said:tid.value,
            pagesize:page.value.pagesize,
            pageindex:page.value.pageindex
        }
    })
    .then(res=>{
        page.value.zonghang=res.data.zonghang
        page.value.zongpage=res.data.zongpage
        info.value=res.data.plist
    })
    .catch(error=>{
        console.log(error);
    })
}
</script>